<template>
  <div class="list-div">
    <div>
      <img class="banner-img" :src="data.banner"></img>
    </div>
    <div class="page-data">
      <div class="sec-title">服务</div>
      <div class="item-content item-inline" >
        <div v-for="(d,dix) in data.service">
          <div>{{d.name}}</div>
        </div>
      </div>
      <div class="item-inline" >
          <div v-for="(d,dix) in data.service" class="ser-item">
              <div v-for="(c,cidx) in d.datas">
                <img :src="c.img">
              </div>
          </div>
      </div>
      <div class="sec-title">客户</div>
      <div class="cus-item" >
        <div v-for="(d,dix) in data.custom">
            <img :src="d.img">
        </div>
      </div>
    </div>





  </div>

</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";

  export default {
    components: {ElRow},
    name: 'Banner',
    data () {
      return {
        data:{
          banner:null,
          custom:[],
          service:[]
        },
      }
    },
    methods: {
      getData(){
        this.$axios.get('/api/home/info', {
          params: {
          }
        }).then(r => {
          let res = r.data
          if (res.code !== 1) {
            this.$message.error(res.msg)
            return
          }
          this.data = res.data
        })
      },

      init () {
        this.getData()
      }
    },
    mounted: function () {
    },
    created: function () {
      this.init()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  .banner-img{
    width: 100vw;
    aspect-ratio: 10 / 2;
  }
  .item-content{
    margin-top: 10px;
  }
  .sec-title{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
  }
  .ser-item > div{
    display: inline-block;
    width: calc((100% - 20px) / 2);

  }
  .ser-item>div:nth-child(even){
    margin-left: 10px;
  }
  .ser-item img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 5px;
    margin-top: 10px;
  }
  .cus-item>div{
    margin-top: 70px;
    width: calc((100% - 140px) / 3);
    display: inline-block;
    margin-left: 70px;
  }
  /* 前3个选择 */
  .cus-item>div:nth-child(-n + 3){
    margin-top: 10px;
  }
  /* 每3个选择 */
  .cus-item>div:nth-child(3n+1){
    margin-left: 0;
  }
  .cus-item img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 5px;
  }

</style>
